<template>
  <div class="app-wrap">
    <nav class="navbar navbar-inverse navbar-fixed-top nav-bg" >
      <img :src="require('@/assets/images/logo.png')" class="logo"/>
      <ul class="nav-right-menu">
        <li @click="leftMenuVisible(true)"><i class="glyphicon glyphicon-home"></i>返回菜单</li>
        <li><i class="glyphicon glyphicon-user"></i>{{loginUser.name}}</li>
        <li><i class="glyphicon glyphicon-log-out"></i>注销</li>
      </ul>
    </nav>
    <left-menu></left-menu>
    <div class="app-main" >
      <div class="masker" v-if="maskerShow" @click="leftMenuVisible(false)"></div>
      <router-view/>
    </div>
  </div>
</template>

<script>
import LeftMenu from '@/components/LeftMenu'
import { getCookie,UserKey } from '@/utils/Cookie'
export default {
  name: 'app',
  data(){
    return {
      maskerShow:false,
      loginUser:{}
    }
  },
  components:{
    LeftMenu
  },
  methods:{
    resizeAppMain(){
      var cHeight = Math.max(document.body.clientHeight, document.documentElement.clientHeight)
      var sHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight)
      var height  = Math.max(cHeight, sHeight)
      $(".app-wrap>.app-main").css({"height":height - 60 +'px'});
    },
    leftMenuVisible(flag){
      //如果返回到导航菜单系统
      // window.location.href = process.env.MENU_PATH;//MENU_PATH在config/xx.env.js配置
      this.maskerShow = flag;
      if(flag){
        $(".app-wrap>.app-left-menu-wrap").animate({left:'0'},'fast')
      }else{
        $(".app-wrap>.app-left-menu-wrap").animate({left:'-200px'},'fast')
      }
    },
  },
  mounted(){
    this.resizeAppMain();
    this.loginUser = JSON.parse(getCookie(UserKey) || "{}");
    $(window).resize(()=> {
        this.resizeAppMain();
    });
  }
}
</script>
<style lang="scss">
  .nav-bg {
    background: linear-gradient(to left, #0066ff, #0099ff, #0066ff);
    filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#0066ff,endcolorstr=#0099ff,gradientType=1);
  }
</style>
